<template>
	<view class="page" v-if="signUpInfo">
		<view class="project-swipe-contain-item">
			<view class="swipe-contain-item-top">
				<view>
					<image class="swipe-contain-item-pic" :src="item.imgAddrs" mode=""></image>
				</view>
				<view class="swipe-contain-item-contain">
					<view style="margin-top: 0upx;" class="swipe-contain-item-contain-title oneline">{{item.activitiesTopic}}</view>
					<view v-if="item.isFee===0" class="swipe-contain-item-activity-info-money">
						{{item.isFee===0?"免费":'¥'+item.regFee}}
					</view>
					<view v-else class="swipe-contain-item-activity-info-money">
						<text style="font-size: 22upx;">¥</text>
						<text style="font-size: 32upx;">{{formatPrice(item,1)}}</text>
						<text style="font-size: 22upx;">{{formatPrice(item,2)+'/人'}}</text>
					</view>
					<view style="margin-left: -8upx;" class="swipe-contain-item-contain-text oneline">
						<text style="color: #BBBBBB;font-size: 24upx;" class="icon iconfont iconweizhi"></text>
						{{item.provinceName+' '+item.cityName}}
					</view>
					<view class="swipe-contain-item-contain-text">{{item.startTime+"~"+item.endTime}}</view>
					<!-- <view class="swipe-contain-item-activity-info">
						<view class="">
							<text class="swipe-contain-item-activity-info-num">{{item.regNumber}}</text>
							<text class="swipe-contain-item-activity-info-text">人报名</text>
						</view>
						
					</view> -->
				</view>
			</view>
		</view>
		<!-- <view class="act-tip">
			<view class="act-tip-left">
				<view class="act-tip-left-icon act-tip-font">
					!
				</view>
				<view class="act-tip-font">
					不支持退
				</view>
			</view>
			<view class="act-tip-right act-tip-font">
				
			</view>
		</view> -->
		<view class="" style="background: #fff;">
			<view class="sign-tip">
				<view class="sign-tip-left" @click="toAddSign">
					<image src="../../static/add.png" mode=""></image>
					添加报名人员
				</view>
				<!-- <view  class="sign-tip-add">
					添加
				</view> -->
			</view>
		</view>

		<view v-if="signerArr.length>0" class="sign-contain">
			<block v-for="( item,index ) in signerArr" :key="index">
				<view class="sign-contain-item">
					<view class="l">
						<view class="sign-contain-index-contain" @click.stop="delSigner(index)">
							<view class="sign-contain-index">
								<image src="../../static/del.png" mode=""></image>
							</view>

						</view>
					</view>
					<view class="r" @click.stop="editSigner(index)">
						<view class="sign-contain-item-contain">

							<view class="sign-contain-title">
								姓名：
							</view>
							<view class="sign-contain-title-r">
								<view class="sign-contain-name-font">
									{{item.realName}}
								</view>
								<view class="">
									<image style="width: 24upx;height: 24upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/or-edit.png" mode=""></image>
								</view>
							</view>
						</view>
						<view class="sign-contain-item-contain">
							<view class="sign-contain-title">
								电话：
							</view>
							<view class="sign-contain-name-font">
								{{item.phoneNumber}}
							</view>
						</view>
						<view class="sign-contain-item-contain">
							<view class="sign-contain-title">
								单位：
							</view>
							<view class="sign-contain-name-font">
								{{item.workUnit}}
							</view>
						</view>
						<view class="sign-contain-item-contain">
							<view class="sign-contain-title">
								职务：
							</view>
							<view class="sign-contain-name-font">
								{{item.jobDuties}}
							</view>
						</view>
						<view v-if="index<signerArr.length-1" class="line-sep">

						</view>
					</view>

				</view>
			</block>
		</view>
		<!-- <view v-else class="none-arr">
			<image src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/act-none.png" mode=""></image>
			<text>暂无报名信息</text>
		</view> -->
		<view class="sign-tip2">
			<view class="sign-tip-left">
				支付方式
			</view>
		</view>
		<view class="ord-pay-type">
			<view class="ord-pay-type-left">
				<image style="width: 40upx;height: 32upx;vertical-align: middle;margin-right: 16upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/weixin.png"
				 mode=""></image>
				<text class="ord-wechat-font">微信支付</text>
			</view>
			<view class="ord-pay-type-right">
				<image style="width: 28upx;height: 28upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/ord-choose.png" mode=""></image>
			</view>
		</view>
		<!-- 	<view class="sign-tip2">
			<view class="sign-tip-left">
				优惠券
			</view>
		</view> -->
		<!-- <view class="sign-coupon">
			<view class="sign-coupon-item">
				<view class="">
					<image style="width: 36upx;height: 27upx;vertical-align: middle;margin-right: 16upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/ord-coupon.png"
					 mode=""></image>
					<text class="ord-wechat-font">无可用优惠券</text>
				</view>
				<view class="ord-pay-type-right">
					<image style="width: 28upx;height: 28upx;" src="https://www.innovationgloble.com/wxs/img/wx/gkxcx/ord-choose.png" mode=""></image>
				</view>
			</view>
		</view> -->
		<view class="ord-height">

		</view>
		<view class="ord-pay-bot">
			<view class="ord-pay-bot-left">
				<view v-if="item.isFee===0" class="ord-pay-bot-left-pay">
					<text>免费</text>
				</view>
				<view v-else class="ord-pay-bot-left-pay">
					<text style="font-size: 26upx;">¥</text>
					<text style="font-size: 38upx;">{{totalPrice(item.regFee)}}</text>
				</view>
			</view>
			<view class="ord-pay-bot-opt" @click="createOrder">
				立即支付
			</view>
		</view>
		<uni-popup ref="showtip" type="center" :mask-click="false">
			<view class="uni-tip">
				<text class="uni-tip-title">提示</text>
				<text class="uni-tip-content">是否删除该报名信息。</text>
				<view class="uni-tip-group-button">
					<text class="uni-tip-button pop-line" @click="confirm">是</text>
					<text class="uni-tip-button" @click="cancel">否</text>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import {
		mapState,
		mapMutations
	} from 'vuex';
	import { permissionJudge } from "@/utils/authority.js" //权限信息校验
	export default {
		data() {
			return {
				item: {},
				signUpInfo: null
			}
		},
		computed: {
			...mapState('orderStore', ['signerArr']),
			totalPrice() {
				return price => parseFloat(this.signerArr.length * price).toFixed(2);
			}
		},
		methods: {
			...mapMutations('orderStore', ['removeSignerArr']),
			createOrder() {
				if (this.signerArr.length === 0) {
					uni.showToast({
						title: '请添加报名人员',
						icon:'none'
					});
					return;
				}
				if(!permissionJudge('pay:order:save')){
					uni.showToast({
						title:'暂无权限',
						icon:'none'
					})
					return false
				}
				try {
					const userInfo = uni.getStorageSync('userInfo');
					const openId = uni.getStorageSync('openid');
					const formData = {
						userInfoId: userInfo.userId,
						mallId: this.signUpInfo.payMallInfoId,
						payType: '21',
						mallNum: this.signerArr.length,
						remarks: 2,
						openId
					}
					this.$request.post({
						url: 'payOrder/addOrder',
						data: formData
					}).then(res => {
						this.orderInfo = res;
						const {
							orderCode,
							orderId
						} = res;
						const list = this.signerArr.map(f => Object.assign({}, f, {
							orderCode,
							activityId: this.signUpInfo.id
						}))
						this.$request.post({
							url: 'signUpInfo/saveBatch',
							data: list
						}).then(res => {
							// 判断 是否 免费 活动 isFee
							if (this.signUpInfo.isFee) {
								this.pay(this.orderInfo);
							} else {
								uni.redirectTo({
									url: "/pagesA/order/act-result"
								});
							}
						})

					})
				} catch (e) {}
			},
			pay(orderInfo) {
				const {
					payMap
				} = orderInfo;
				const {
					nonceStr,
					sign,
					signType,
					timeStamp
				} = payMap;
				uni.requestPayment({
					provider: 'wxpay',
					timeStamp: timeStamp,
					nonceStr: nonceStr,
					package: payMap.package,
					signType: signType,
					paySign: sign,
					success: function(res) {
						uni.redirectTo({
							url: "/pagesA/order/act-result"
						});
					},
					fail: function(err) {
						uni.redirectTo({
							url: "/pagesB/my-order/my-order"
						});
					}
				});
			},
			getSignUpInfo() {
				this.$request.get({
					url: 'innovationActivities/getSignUpInfo',
					data: {
						id: this.item.id
					}
				}).then(res => {
					this.signUpInfo = res;
				})
			},
			saveBatch() {

			},
			addOrder() {

			},
			toAddSign() {
				uni.navigateTo({
					url: '/pagesA/add-sign/add-sign'
				})
			},
			editSigner(index) {
				uni.navigateTo({
					url: `/pagesA/add-sign/add-sign?index=${index}`
				})
			},
			formatTotal(price) {
				const num = this.signerArr.length;
				let total = (price * num).toFixed(2);
				return total;
				if (flag === 1) {
					let zfee = total.split('.')[0];
					return zfee
				}

				if (flag === 2) {
					let mfee = total.split('.')[1];
					return "." + mfee
				}
			},
			formatPrice(item, flag) {
				if (JSON.stringify(item) === "{}") {
					return false
				}
				if (item.isFee === 0) {
					return "免费"
				} else {
					let fee = item.regFee.toFixed(2);
					if (flag === 1) {
						let zfee = fee.split('.')[0];
						return zfee
					}

					if (flag === 2) {
						let mfee = fee.split('.')[1];
						return "." + mfee
					}
					// return '¥'+fee
				}
			},
			delSigner(v) {
				this.$nextTick(() => {
					this.$refs['showtip'].open()
				})
				this.index = v
			},
			confirm() {
				this.removeSignerArr(this.index);
				this.cancel()
			},
			cancel() {
				this.$refs['showtip'].close()
			},
		},
		onShow() {

		},
		onLoad(option) {
			this.item = JSON.parse(option.param);
			this.getSignUpInfo();
		}
	}
</script>

<style scoped>
	.page {
		min-height: 100vh;
		background: #F5F6F9;
	}

	.project-seprate {
		width: 100%;
		height: 12upx;
		background: rgba(245, 245, 245, 1);
	}

	.swipe-contain-item-activity-info-money {
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(222, 90, 2, 1);
	}

	.swipe-contain-item-activity-info-num {
		color: #2A7DFA;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.swipe-contain-item-activity-info-text {
		color: #7B7B7B;
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.oneline {
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.swipe-contain-item-activity-info {
		display: flex;
		justify-content: space-between;
	}

	.swipe-contain-item-contain-text {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(83, 83, 83, 1);
		text-overflow: ellipsis;
		overflow: hidden;
		white-space: nowrap;
	}

	.selfcolor {
		color: #DE5A02
	}

	.swipe-contain-item-contain {
		padding-bottom: 4upx;
		width: 382upx;
		/* flex:1 */
	}

	.swipe-contain-item-pic {
		width: 270upx;
		height: 170upx;
		/* border: 1px solid #09BB07; */
		margin-right: 30upx;
		flex-shrink: 0;
		border-radius: 6upx;
	}

	.swipe-contain-item-top {
		display: flex;
		align-items: center;
		padding-bottom: 28upx;
		/* border-bottom: 1upx solid #DDDDDD; */
	}

	.project-swipe-contain-item {
		border-bottom: 15upx solid #F5F6F9;
		padding: 32upx 30upx 0 30upx;
		background-color: #fff;
	}

	.act-tip {
		margin: 0 30upx;
		display: flex;
		justify-content: space-between;
	}

	.act-tip-left {
		display: flex;
		align-items: center;
	}

	.act-tip-left-icon {
		width: 24upx;
		height: 24upx;
		display: flex;
		justify-content: center;
		align-items: center;
		border: 1upx solid #7B7B7B;
		border-radius: 50%;
		margin-right: 10upx;

	}

	.act-tip-font {
		font-size: 24upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(123, 123, 123, 1);
	}

	.sign-tip {
		height: 88upx;
		display: flex;
		justify-content: space-between;
		align-items: center;

		background-color: #fff;
		/* background-color: #F5F6F9; */
		margin: 0 30upx;
	}

	.sign-tip2 {
		background: #F5F6F9;
		height: 88upx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		/* background-color: #F5F6F9; */
		padding: 0 30upx;
	}

	.sign-tip2 .sign-tip-left {
		color: #757575;
	}

	.sign-tip-left {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(85, 85, 85, 1);
		color: #2A7DFA;
		font-size: 28upx;
		display: flex;
		align-items: center;

	}

	.sign-tip-left image {
		width: 40upx;
		height: 40upx;
		margin-right: 15upx;
	}

	.sign-tip-add {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(42, 125, 250, 1);
	}

	.sign-contain {
		padding: 0 30upx;
		background-color: #fff;
	}

	.sign-contain-item {
		padding: 30upx 0;
		border-top: 1px solid #eaeaea;
		display: flex;

	}

	.sign-contain-item .l {}

	.sign-contain-item .r {
		flex: 1;
	}




	.sign-contain-item-contain {
		display: flex;
		align-items: center;
	}

	.sign-contain-index-contain {
		width: 30upx;
		margin-right: 32upx;
	}

	.sign-contain-index {
		width: 48upx;
		height: 55upx;
		/* background-color: #6CA7FF; */
		display: flex;
		justify-content: center;
		align-items: center;
		/* border-radius: 50%; */
		/* 		font-size: 22upx;
		font-family: PingFangSC-Medium, PingFang SC;
		font-weight: 500; */
		/* color: rgba(255, 255, 255, 1); */
	}

	.sign-contain-index image {
		width: 30upx;
		height: 30upx;
	}

	.sign-contain-title {
		color: #757575;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		/* width: 144upx; */
		text-align: end;
	}

	.sign-contain-title-r {
		display: flex;
		flex: 1;
		justify-content: space-between;
		align-items: center;
	}

	.sign-contain-name-font {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.line-sep {
		border-bottom: 1upx solid #DDDDDD;
		height: 2upx;
		margin-top: 30upx;
	}

	.ord-pay-type {
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 98upx;
		background-color: #FFFFFF;
		padding: 0 30upx;
	}

	.ord-pay-type-left {
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.ord-wechat-font {
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(51, 51, 51, 1);
	}

	.ord-pay-type-right {
		width: 28upx;
		height: 28upx;
	}

	.sign-coupon {
		background-color: #FFFFFF;
		padding: 37upx 30upx;
	}

	.sign-coupon-item {
		display: flex;
		justify-content: space-between;
	}

	.ord-pay-bot {
		height: 96upx;
		background-color: #FFFFFF;
		display: flex;
		justify-content: space-between;
		align-items: center;
		width: 100%;
		position: fixed;
		left: 0;
		bottom: 0;

		padding-bottom: 0;
		padding-bottom: constant(safe-area-inset-bottom);
		padding-bottom: env(safe-area-inset-bottom);
	}

	.ord-pay-bot-left {
		display: flex;
		align-items: center;
		margin-left: 30upx;
	}

	.ord-pay-bot-left-pay {
		width: 142upx;
		font-size: 26upx;
		font-family: ArialMT;
		color: rgba(222, 90, 2, 1);
	}

	.ord-pay-bot-left-coupon {
		font-size: 22upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(34, 34, 34, 1);
	}

	.ord-height {
		background-color: #F5F6F9;
		height: 130upx;
	}

	.ord-pay-bot-opt {
		width: 222upx;
		background: linear-gradient(90deg, rgba(108, 167, 255, 1) 0%, rgba(42, 125, 250, 1) 100%);
		font-size: 32upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(255, 255, 255, 1);
		display: flex;
		height: 96upx;
		justify-content: center;
		align-items: center;



	}

	.none-arr {
		width: 100%;
		background-color: #FFFFFF;
		flex-direction: column;
		display: flex;
		justify-content: center;
		align-items: center;
	}

	.none-arr text {
		margin-top: 49upx;
		margin-bottom: 49upx;
		font-size: 26upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(116, 116, 116, 1);
	}

	.none-arr image {
		width: 255upx;
		height: 144upx;
		margin-top: 57upx;
	}

	.uni-tip {
		/* #ifndef APP-NVUE */
		display: flex;
		flex-direction: column;
		/* #endif */
		width: 300px;
		background-color: #FFFFFF;
		border-radius: 24upx;
	}

	.uni-tip-title {
		margin-top: 37upx;
		text-align: center;
		font-size: 34upx;
		font-family: PingFangSC-Semibold, PingFang SC;
		font-weight: 600;
		color: rgba(3, 3, 3, 1);
	}

	.uni-tip-content {
		text-align: center;
		font-size: 28upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: rgba(111, 111, 111, 1);
		margin: 33upx 0upx;
	}

	.uni-tip-group-button {
		/* #ifndef APP-NVUE */
		display: flex;
		/* #endif */
		flex-direction: row;
		justify-content: center;
		align-items: center;
		border-top: 2upx solid #e6e6e6;
		/* margin-top: 20px; */
		height: 86upx;
		font-size: 34upx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
	}

	.uni-tip-button {
		flex: 1;
		text-align: center;
		font-size: 14px;
		color: #F7B500;
		height: 100%;
		display: flex;
		justify-content: center;
		align-items: center;

	}

	.pop-line {
		border-right: 1upx solid #e6e6e6;
		color: #6F6F6F
	}
	
</style>
